<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册页面</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="assets/layui/css/layui.css">
	<link rel="stylesheet" href="assets/css/all.css" />
	<link rel="stylesheet" href="assets/css/uploadimg.css" />
</head>
<body class="register">
<div class="layui-layout layui-layout-admin">
	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
		  <script src="assets/js/html5.min.js"></script>
		  <script src="assets/js/respond.min.js"></script>
		<![endif]-->
	<div class="layui-header">
		<div class="layui-logo">汽车保险后台管理系统</div>
	</div>
	<div class="layui-container" style="width:998px;margin:20px auto;padding:20px;border:1px solid #009688;background-color: #f9f9f9;border-radius: 10px;">
		<div class="layui-text">
			<h2 class="layui-field-title" style="text-align: center;">请详细填写注册信息</h2>
			<!--<p class="warm-tip">注：带*为必填项</p>-->
		</div>
		<form class="layui-form" action="" onsubmit="return false;">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">账号</label>
					<div class="layui-input-inline">
						<input id="regaccount" type="text" name="" lay-verify="required|regaccount" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-inline">
						<input id="regpass" type="text" name="" lay-verify="required|regpass" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">确认密码</label>
					<div class="layui-input-inline">
						<input id="regpassagain" type="text" name="" lay-verify="required|regpassagain" autocomplete="off" class="layui-input">
					</div>
				</div>	
				<div class="layui-inline">
					<label class="layui-form-label layui-elip">邀请码 </label>
					<div class="layui-input-inline">
						<input type="text" name="" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip">联系人 </label>
					<div class="layui-input-inline">
						<input type="text" name="" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip">联系电话</label>
					<div class="layui-input-inline">
						<input type="text" name="" lay-verify="required|regphone" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline" style="min-width:750px">
					<label class="layui-form-label">公司地址</label>
					<div class="layui-input-inline">
						<select name="provid" id="provid" lay-filter="provid">
							<option value="">请选择省</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<select name="cityid" id="cityid" lay-filter="cityid">
							<option value="">请选择市</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<select name="areaid" id="areaid" lay-filter="areaid" onchange="getlocation()">
							<option value="">请选择县/区</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label"></label>
					<div class="layui-input-inline">
						<input id="detail-location" style="width:590px" type="text" name="detailid" placeholder="详细地址" autocomplete="off" class="layui-input" value="">
					</div>
				</div>
			</div>
			<div class="layui-upload">
			  <button type="button" class="layui-btn" id="upyyzz">上传营业执照：<span style="color:red;">(文件类型jpg、png、bmp、jpeg,大小不超过2M)</span></button>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="img1" src="assets/img/a11.png">
			    <p id="upyyzztip"></p>
			  </div>
			</div>  
			<div class="layui-upload">
			  <button type="button" class="layui-btn" id="upkhxk">上传开户许可证：<span style="color:red;">(文件类型jpg、png、bmp、jpeg,大小不超过2M)</span></button>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="img2" src="assets/img/a11.png">
			    <p id="upkhxktip"></p>
			  </div>
			</div>  
			<div class="car-img">
				<!--<div class="img-box full" style="width:auto;min-width:180px;padding-left: 40px;">
					<section class=" img-section">
						<p class="up-p">资质类证书：<span style="color:red;">(文件类型jpg、png、bmp、jpeg,大小不超过2M)</span><span class="up-span"></span></p>
						<div class="z_photo upimg-div clear" style="margin-left: 90px;">
							<section class="z_file fl">
								<img src="assets/img/a11.png" class="add-img">
								<input type="file" name="zzl" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
							</section>
						</div>
					</section>
				</div>
				<aside class="mask works-mask">
					<div class="mask-content">
						<p class="del-p ">您确定要删除图片吗？</p>
						<p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
					</div>
				</aside>-->				
				<div class="layui-upload imgupload layui-clear">
					<button type="button" class="layui-btn" id="res-up-btn"></button>
					<blockquote class="layui-elem-quote layui-quote-nm layui-clear" style="border:none">图片上传:(<span style="color: red;">点击图片可将其删除,文件类型jpg、png、bmp、jpeg,大小不超过2M</span>)
						<div class="layui-upload-list" id="pics-wrap">
							 <span class="add-bg">+</span>
						</div>
					</blockquote>
				</div>
			</div>
			<div style="text-align: center;margin:20px auto;">
				<button class="layui-btn register-btn" lay-submit lay-filter="submit-btn">注 册</button>
			</div>
		</form>
	</div>
</div>
	<script src="assets/layui/layui.js"></script>
	<script src="assets/js/jquery-2.1.0.js"></script>

	<!--省市地区选择-->
	<script type="text/javascript" src="assets/js/data.js"></script>
	<script type="text/javascript" src="assets/js/province.js"></script>
	<script type="text/javascript">
		var defaults = {
			s1: 'provid',
			s2: 'cityid',
			s3: 'areaid',
			v1: null,
			v2: null,
			v3: null
		};
		
		//获取地区值
		$(".register-btn").click(function(){
			var provName = $("#provid option:selected").text();
			var cityName = $("#cityid option:selected").text();
			var areaName = $("#areaid option:selected").text();
			var locationName = provName + cityName + areaName;
			alert(locationName);
		})
	</script>
	<!--//省市地区选择-->
	<script type="text/javascript" src="assets/js/all.js"></script>
	<script type="text/javascript">
		layui.use(['form','layer','upload'],function(){
			var form = layui.form,
				layer = layui.layer,
				upload = layui.upload,
				$ = layui.$
			//注册页面js
			//自定义验证规则
			form.verify({
				regpass: [/(.+){6,12}$/, '密码必须6到12位'],
				regpassagain:function(value){
					if(value != $("#regpass").val()){
						$("#regpassagain").val('');
						return '确认密码与密码不一致';
					}
				}
			});
			//图片上传营业执照
			var uploadInst = upload.render({
			    elem: '#img1'
			    ,url: '/upload/'
			    ,size:1024*2
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#img1').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#upyyzztip');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
			      demoText.find('body').delegate('.demo-reload','click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
			  
			  //图片上传开户许可证
			var uploadInst = upload.render({
			    elem: '#img2'
			    ,url: '/upload/'
			    ,size: 1024*2
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#img2').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#upkhxktip');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
			  
			    //资质类上传
			    upload.render({
			    	elem: '#res-up-btn',
			    	url: '/upload/',
			    	multiple: true,
			    	size: 1024*2,
			    	number:0,
			    	before: function(obj) {
			    		//预读本地文件示例，不支持ie8
			    		obj.preview(function(index, file, result) {
			    			$('.register #pics-wrap').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
			    		});
			    	},
			    	done: function(res) {
			    		//上传完毕
			    	}
			    });
			    //资质类点击删除图片
			    $(".register").delegate(".imgupload blockquote img","click",function(){
			    	var theImg = $(this);
			    	layer.confirm("确定删除此张图片吗？",function(index){
			    		theImg.remove();
			    		layer.close(index);
			    	})
			    })
		})
	</script>
</body>
</html>
